<template>
  <div class="categories">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体 -->
    <el-card class="mt16">
      <!-- 添加分类 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="addCataBtn"
            >添加分类</el-button
          ></el-col
        >
      </el-row>
      <!-- tab表格 -->
      <el-table :data="GoodsCataList" row-key="cat_id">
        <el-table-column type="index" label="#">
          <template slot-scope="scope">
            <div>{{ scope.row.idx }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="cat_name" label="分类名称"></el-table-column>
        <el-table-column label="是否有效">
          <template slot-scope="scope">
            <div>
              <i
                v-if="!scope.row.cat_deleted"
                class="el-icon-success"
                style="color: #28e27d"
              ></i>
              <i v-else class="el-icon-error" style="color: #fc011a"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="排序">
          <template slot-scope="scope">
            <div>
              <el-tag effect="dark" :type="typeObj[scope.row.cat_level]">{{
                scope.row.cat_level | rank
              }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="primary">编辑</el-button>
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pagenum"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pageInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加分类对话框 -->
    <el-dialog
      title="添加"
      :visible.sync="isAdddialog"
      width="55%"
      @close="reseForm"
    >
      <el-form
        :model="addFormCata"
        :rules="addFormCataRules"
        ref="addFormCataRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addFormCata.cat_name"></el-input>
        </el-form-item>
        <!--
          v-model: 选中项绑定值
          options: 可选项数据源，键名可通过 Props 属性配置 
          props:   配置选项，具体见下表
          show-all-levels:  输入框中是否显示选中值的完整路径
     
          -->
        <el-form-item label="父级分类">
          <p>父类id数组:{{ checkArr }}</p>
          <el-cascader
            ref="iscascade"
            v-model="checkArr"
            :options="options"
            :props="defaultProps"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addCataOk('addFormCataRef')"
            >确定</el-button
          >
          <el-button @click="isAdddialog = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "categories",
  data() {
    return {
      typeObj: {
        0: "primary",
        1: "success",
        2: "warning",
      },
      //配置选项
      defaultProps: {
        checkStrictly: true,
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      //选中项绑定值
      checkArr: [],
      //数据源，
      options: [],
      isAdddialog: false,
      //添加对话框数据
      addFormCata: {
        //父 ID
        cat_pid: 0,
        //名称
        cat_name: "",
        //分类层级
        cat_level: 0,
      },
      //分类名称验证
      addFormCataRules: {
        cat_name: [
          { required: true, message: "分类名称不能为空", trigger: "blur" },
        ],
      },
      //表格数据
      GoodsCataList: [],
      total: 0, //总条数
      pageInfo: {
        query: "", //查询
        pagenum: 1, //当前页
        pagesize: 10, //当前页几条
      },
    };
  },
  computed: {},
  methods: {
    //重置清空表单
    reseForm() {
      this.addFormCata = {};
      this.checkArr = [];
    },

    async getGoodsCataList() {
      const res = await this.$http.getGoodsCataListApi(this.pageInfo);
      console.log(res, "商品分类数据");
      const { total, result } = res;
      result.forEach((item, index) => {
        item.idx = index + 1;
      });
      this.total = total;
      this.GoodsCataList = result;
    },
    //添加商品分类到后台
    async addCataOk() {
      if (this.checkArr.length !== 0) {
        //父ID
        this.addFormCata.cat_pid = this.checkArr[this.checkArr.length - 1];
        //当前分类级别
        this.addFormCata.cat_level = this.checkArr.length;
      } else {
        this.addFormCata.cat_pid = 0;
        this.addFormCata.cat_level = 0;
      }
      console.log(this.addFormCata);
      await this.$http.getGoodsCateApi(this.addFormCata);

      this.isAdddialog = false;
      this.getGoodsCataList();
    },
    //添加监听级联
    handleChange() {
      // console.log("监听级联");
      // console.log(this.$refs.iscascade.dropDownVisible, "隐藏");
      this.$refs.iscascade.dropDownVisible = false;
    },

    //添加弹出对话框
    async addCataBtn() {
      this.isAdddialog = true;
      const res = await this.$http.getGoodsCateListApi({ type: "2" });
      console.log(res, "添加分类");
      this.options = res;
    },
    //分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pagesize = val;
      this.getGoodsCataList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.pagenum = val;
      this.getGoodsCataList();
    },
  },
  mounted() {},
  created() {
    this.getGoodsCataList();
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-icon-arrow-right:before {
  content: "\27A4";
}
</style>
